<template>
    <div class="container">
        <el-form
        :model="RegisterUser"
        :rules="rules"
        status-icon
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="name">
          <el-input
            prefix-icon="el-icon-user-solid"
            placeholder="请输入账号"
            v-model="RegisterUser.name"
          ></el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input
            prefix-icon="el-icon-view"
            type="password"
            placeholder="请输入密码"
            v-model="RegisterUser.pass"
          ></el-input>
        </el-form-item>
        <el-form-item prop="confirmPass">
          <el-input
            prefix-icon="el-icon-view"
            type="password"
            placeholder="请再次输入密码"
            v-model="RegisterUser.confirmPass"
          ></el-input>
        </el-form-item>     
         <div class="btnStyle">    
            <Vcode :show="VcodeShow" @success="success" @close="close" />
          <el-button size="medium" type="primary" @click="register">注册</el-button>   
          <el-button size="medium" type="primary" @click="reSetRegister" >重置</el-button>  
         </div>
      </el-form>
    </div>
</template>

<script>
import Vcode from "vue-puzzle-vcode";
export default {
    data() {
    // 用户名的校验方法
    let validateName = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请输入用户名"));
      }
      // 用户名以字母开头,长度在5-16之间,允许字母数字下划线
      const userNameRule = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
      if (userNameRule.test(value)) {
        //判断数据库中是否已经存在该用户名
        this.$refs.ruleForm.validateField("checkPass");
        return callback()
        // this.$api.findUsernameExist({
        //   username:this.RegisterUser.name
        // })
        //   .then(res => {
        //     //200代表用户名不存在可以注册

        //     if (res.data.code == 200&&!res.data.obj===true) {
        //       this.$refs.ruleForm.validateField("checkPass");
        //       return callback();
        //     } else if (res.data.obj){
        //       return callback(new Error("用户名已存在"));
        //     }
        //     else {
        //       return callback(new Error(res.data.msg));
        //     }
        //   })
        //   .catch(err => {
        //     return Promise.reject(err);
        //   });
      } else {
        return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      }
    };
    // 密码的校验方法
    let validatePass = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入密码"));
      }
      // 密码以字母开头,长度在4-23之间,允许字母数字和下划线
      const passwordRule =  /(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{4,23}/;
      if (passwordRule.test(value)) {
        this.$refs.ruleForm.validateField("checkPass");
        return callback();
      } else {
        return callback(
          new Error("密码以字母开头,长度在4-23之间,允许字母数字和下划线")
        );
      }
    };
    // 确认密码的校验方法
    let validateConfirmPass = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("请输入确认密码"));
      }
      // 校验是否以密码一致
      if (this.RegisterUser.pass != "" && value === this.RegisterUser.pass) {
        this.$refs.ruleForm.validateField("checkPass");
        return callback();
      } else {
        return callback(new Error("两次输入的密码不一致"));
      }
    };
    return {
    VcodeShow:false,
      RegisterUser: {
        name: "",
        pass: "",
        confirmPass: ""
      },
      // 用户信息校验规则,validator(校验方法),trigger(触发方式),blur为在组件 Input 失去焦点时触发
      rules: {
        name: [{ validator: validateName, trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        confirmPass: [{ validator: validateConfirmPass, trigger: "blur" }]
      }
    };
  },
  components:{
      Vcode
    },
  methods: {
      reSetRegister(){
          this.RegisterUser.name = ''
          this.RegisterUser.pass = ''
          this.RegisterUser.confirmPass = ''
      },
      register(){
          this.VcodeShow = true
      },
      success(){
            this.VcodeShow = false
        },
      close(){
            this.VcodeShow = false
        }
  }
}
</script>

<style lang="scss" scoped>
    .btnStyle{
        display: flex;
        justify-content: center;
    }
</style>